<!DOCTYPE html>
<html>
	<!--
    	作者：offline
    	时间：2018-06-27
    	描述：岗位管理
    -->

	<head>
		<!-- 引入框架文件 -->
		<link rel="stylesheet" href="../../model/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<script type="text/javascript" src="../../model/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../../model/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
		<link rel="stylesheet" href="../../static/css/employee.css" />
		<script type="text/javascript" src="../../model/models.js"></script>
		<script type="text/javascript" src="../../model/drag.js"></script>
		<script type="text/javascript" src="../../model/dispose.js"></script>
		<meta charset="UTF-8">
		<style>
			.content a {
				color: #000000;
			}
		</style>
		<title></title>
	</head>

	<body>
		<div include="../../static/header.htm"></div>
		<div style="height: 100%;float: left;" include="../../static/aside.htm"></div>

		<div class="aside2">
			<div include="../../static/coManage.htm"></div>
		</div>

		<div class="section">
			<div style="color: white;font-size: 36px;text-align: center; width: 100%; height: 70px;" class="head"><b>岗位管理</b></div>
			<div class="content" style="position: relative;">
				<div id="show_" class="panel panel-default">
					<!--
                        	添加
                        -->
					<div class="panel-heading">
						<form id="addPost">
							<table class="table table-bordered">
								<tr>
									<td>
										<div class="right">
											<span style="margin: 7px;">编　　号：</span>
											<input type="text" readonly placeholder="自动生成编号" class="form-control" style="width: 200px" />
										</div>
									</td>
									<td>
										<div class="right">
											<span style="margin: 7px;">名　　称：</span>
											<input name="postName" type="text" class="form-control" style="width: 200px" />
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="right">
											<span style="margin: 7px;">类　　型：</span>
											<select name="postType" class="form-control" style="width: 200px">
												<option value="管理">管理</option>
												<option value="技术">技术</option>
												<option value="营销">营销</option>
												<option value="市场">市场</option>
											</select>
										</div>
									</td>
									<td>
										<div class="right">
											<span style="margin: 7px;">岗位编制：</span>
											<input name="postMent" class="form-control" type="text" placeholder="岗位上最多可配置多少员工" style="width: 200px" />
										</div>
									</td>
								</tr>
							</table>
							<!-- 提交按钮 -->
							<div style="margin: 0 auto; width: 200px; height: 70px; margin-top: 10px;">
								<input class="btn btn-danger" style="width: 200px;" type="submit" value="添加" />
							</div>
						</form>
					</div>
					<!-- Table -->
					<!-- 搜索 -->
					<div class="panel-body">
						<form id="findPost">
							<div class="">
								<input name="key" class="form-control" style="width: 250px; float: left;margin-right: 10px;" placeholder="岗位编号/岗位名称" type="text" />
								<input class="btn btn-primary" type="submit" value="查询" />
								<input name="page" id="page" type="hidden" value="1" />
							</div>
						</form>
					</div>

					<table class="table">
						<table class="table table-striped">
							<thead>
								<tr>
									<th>编号</th>
									<th>名称</th>
									<th>类型</th>
									<th>编制</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody id="turBody">
							</tbody>
						</table>
						<!-- 分页开始 -->
						<nav style="position: absolute; bottom: 20px;" aria-label="Page navigation">
							<ul id="pagination" class="pagination">
								<li>
									<a href="#" aria-label="Previous">
										<span aria-hidden="true">&laquo;</span>
									</a>
								</li>
								<li>
									<a href="#" aria-label="Next">
										<span aria-hidden="true">&raquo;</span>
									</a>
								</li>
							</ul>
						</nav>
						<!-- 分页结束 -->
					</table>
				</div>
				<!--描述：修改-->
				<div style="display: none;" id="show_up" class="panel panel-default" style="position:fixed;margin:auto;left:0; right:0; top:0; bottom:0;width:500px; height:400px;">
					<!-- Default panel contents -->
					<ol class="breadcrumb">
						<li>
							<a onclick='show()' href="#">岗位管理</a>
						</li>
						<li class="active">岗位修改</li>
					</ol>
					<div class="panel-heading">岗位修改</div>
					<div class="panel-body">
					</div>

					<!-- Table -->
					<form id="updatePost">
						<table class="table">
							<tr>
								<td>
									<div class="right">
										<span style="margin: 7px;">编　　号：</span>
										<input id="id" name="id" type="text" readonly placeholder="自动生成编号" class="form-control" style="width: 200px" />
									</div>
								</td>
								<td>
									<div class="right">
										<span style="margin: 7px;">名　　称：</span>
										<input id="postName" name="postName" type="text" class="form-control" style="width: 200px" />
									</div>
								</td>
							</tr>
							<tr>
								<td>
									<div class="right">
										<span style="margin: 7px;">类　　型：</span>
										<select id="postType" name="postType" class="form-control" style="width: 200px">
											<option value="管理">管理</option>
											<option value="技术">技术</option>
											<option value="营销">营销</option>
											<option value="市场">市场</option>
										</select>
									</div>
								</td>
								<td>
									<div class="right">
										<span style="margin: 7px;">岗位编制：</span>
										<input id="postMent" name="postMent" class="form-control" type="text" placeholder="岗位上最多可配置多少员工" style="width: 200px" />
									</div>
								</td>
							</tr>
						</table>
						<!-- 提交按钮 -->
						<div style="margin: 0 auto; width: 200px; height: 70px; margin-top: 10px;">
							<input class="btn btn-danger" style="width: 200px;" type="submit" value="更新" />
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>

	<script>
		//		dragFunc(document.getElementById('findPost'));
		//		dragFunc(document.getElementById('addPost'));
		//		dragFunc(document.getElementById('delPost'));
		//		dragFunc(document.getElementById('updatePost'));
		//挂载事件,当表单提交时进行处理
		$("#addPost").submit(function(e) {

			//阻止表单默认事件,不让表单跳转到其它页面
			e.preventDefault();

			//jq的回调函数中的this,一般表示该事件源,即触发事件的元素
			var $self = $(this);

			//$self.serialize(); 将表单中的数据进行序列化
			//async:true 采用异步操作
			$.ajax({
				type: "post",
				url: "http://localhost:9090/addPost",
				"data": $self.serialize(),
				"success": function(obj) {
					if(obj.code == 1) {
						window.wxc.xcConfirm("添加成功！", "success");
					}
				},
				"dataType": "json",
				async: true
			});

		});

		$("#findPost").submit(function(e) {

			//阻止表单默认事件,不让表单跳转到其它页面
			e.preventDefault();

			//jq的回调函数中的this,一般表示该事件源,即触发事件的元素
			var $self = $(this);

			//$self.serialize(); 将表单中的数据进行序列化
			//async:true 采用异步操作
			$.ajax({
				type: "post",
				url: "http://localhost:9090/findPostByKey",
				"data": $self.serialize(),
				"success": function(obj) {
					if(obj.code == 1) {
						var list = obj.data;

						var $tbody = $("#turBody");
						$tbody.html("");

						upPage("pagination", obj.page);
						if(null == list.length) {
							var post = list;

							var $tr = $("<tr id='del" + post.id + "'></tr>")

							$tr.append("<td>" + post.id + "</td>");
							$tr.append("<td>" + post.postName + "</td>");
							$tr.append("<td>" + post.postType + "</td>");
							$tr.append("<td>" + post.postMent + "</td>");
							$tr.append("<td><a href='#' onclick='updatePost(" + post.id + ")'>修改</a><a href='#' onclick='delPost(" + post.id + ")'>删除</a></td>");
							$tbody.append($tr);
						} else {

							for(var i = 0; i < list.length; i++) {
								var post = list[i];

								var $tr = $("<tr id='del" + post.id + "'></tr>")

								$tr.append("<td>" + post.id + "</td>");
								$tr.append("<td>" + post.postName + "</td>");
								$tr.append("<td>" + post.postType + "</td>");
								$tr.append("<td>" + post.postMent + "</td>");
								$tr.append("<td><a href='#' onclick='updatePost(" + post.id + ")'>修改</a><a href='#' onclick='delPost(" + post.id + ")'>删除</a></td>");
								$tbody.append($tr);
							}
						}

					} else {
						window.wxc.xcConfirm("失败！", "error");
					}
				},
				"dataType": "json",
				async: true
			});

		});

		function pageSkip(page) {
			$("#page").val(page);

			$("#findPost").submit();
		}

		function updatePost(id) {
			$("#show_").css("display", "none");
			var a = {
				key: id,
				page: 1
			};
			$.ajax({
				type: "post",
				url: "http://localhost:9090/findPostByKey",
				"data": a,
				"success": function(obj) {
					if(obj.code == 1) {
						var list = obj.data;

						for(var index in list) {
							$("#" + index).val(list[index]);
						}
					} else {
						window.wxc.xcConfirm("失败！", "error");
					}
				},
				"dataType": "json",
				async: true
			});

			$("#show_up").css("display", "block");
		}

		$("#updatePost").submit(function(e) {
			e.preventDefault();
			var $self = $(this);

			$.ajax({
				type: "post",
				url: "http://localhost:9090/updatePost",
				"data": $self.serialize(),
				"success": function(obj) {
					if(obj.code == 1) {
						window.wxc.xcConfirm("更新成功！", "success");
						$("#findPost").submit();
						$("#page").val(page);
						$("#findPost").submit();

						$("#show_").css("display", "block");
						$("#show_up").css("display", "none");
					} else {
						window.wxc.xcConfirm("失败！", "error");
					}
				},
				"dataType": "json",
				async: true
			});

		});

		function delPost(id) {

			window.wxc.xcConfirm("是否删除该岗位", window.wxc.xcConfirm.typeEnum.warning, {
				onOk: function() {
					window.wxc.xcConfirm("是否将该岗位下员工的岗位设置为空", window.wxc.xcConfirm.typeEnum.warning, {
						onOk: function() {
							$.ajax({
								type: "post",
								url: "http://localhost:9090/delPost",
								"data": {
									id: id
								},
								"success": function(obj) {
									if(obj.data != null) {
										window.wxc.xcConfirm("删除成功！", "success");
										$("#findPost").submit();

									} else {
										window.wxc.xcConfirm("失败！", "error");
									}

								},
								"dataType": "json",
								async: true
							});
						},
						onCancel: function() {
							$.ajax({
								type: "post",
								url: "http://localhost:9090/delPost",
								"data": {
									id: id
								},
								"success": function(obj) {
									if(obj.data != null) {
										window.wxc.xcConfirm("删除成功！", "success");
										$("#findPost").submit();

									} else {
										window.wxc.xcConfirm("失败！", "error");
									}

								},
								"dataType": "json",
								async: true
							});
							return true;
						}
					});
				},
			});
			return flag;
		};
		
		function show() {
			$("#show_up").css("display", "none");
			$("#show_").css("display", "block");
		}
	</script>

</html>